/*
 * @Author: your name
 * @Date: 2021-07-07 13:42:05
 * @LastEditTime: 2021-07-22 14:10:21
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \cuiyuan_activity\assets\script\ScrollView.ts
 */
// Learn TypeScript:
//  - https://docs.cocos.com/creator/manual/en/scripting/typescript.html
// Learn Attribute:
//  - https://docs.cocos.com/creator/manual/en/scripting/reference/attributes.html
// Learn life-cycle callbacks:
//  - https://docs.cocos.com/creator/manual/en/scripting/life-cycle-callbacks.html

const { ccclass, property } = cc._decorator;
import { sceneData } from "DataModule";
import { scenes } from "./Data";
import SceneContent from "./ContentScene";

@ccclass
export default class NavBar extends cc.Component {
    // LIFE-CYCLE CALLBACKS:
    static inst: NavBar;

    // scroll 节点和控件
    @property(cc.ScrollView)
    scrollView: cc.ScrollView = null;
    @property(cc.Node)
    scroll: cc.Node = null;


    // 导航UI
    @property(cc.Node)
    nav_content: cc.Node = null;
    @property(cc.Node)
    notice: cc.Node = null;
    @property(cc.Prefab)
    nav_profab: cc.Prefab = null;

    // 逻辑参数
    sceneDatas: sceneData[] = [];// 场景用到的资源
    navPool: cc.NodePool = new cc.NodePool(); // 创建块对象池
    navIndex: number = 0; // 对应导航的索引
    moveDistance: number = 300

    onLoad() {
        NavBar.inst = this;
        this.sceneDatas = scenes;
        this.init();
    }
    // 初始化节点
    init() {
        this.addNavItem();
    }

    close() {
        this.hide();
        // 让并且让移动
        SceneContent.inst.controllScene(1, false, false, 'pause');
    }

    // 隐藏当前节点
    hide() {
        this.scroll.y = -200;
        this.scroll.opacity = 255;
        // 添加一个动画
        cc.tween(this.scroll).to(0.5, { y: this.scroll.y - this.moveDistance, opacity: 0 }).call(() => {
            this.node.active = false;

        }).start()

    }
    // 展示场景导航栏
    show() {
        this.node.active = true;
        this.scroll.y = -500;
        this.scroll.opacity = 0;
        cc.tween(this.scroll).to(0.5, { y: this.scroll.y + this.moveDistance, opacity: 255 }).start()
        this.updateStatus();
        // 做一个演示，在修改完成之后刷新导航栏的位置
        setTimeout(() => {
            this.changeNav(SceneContent.inst.currentIndex);
        }, 200)


    }
    // 移动到对应的位置
    /**
     * 
     * @param node 需要移动到的node
     */
    scrollTo(node: cc.Node) {
        let x = node.x - node.width / 2 - 5;
        this.scrollView.scrollToOffset(cc.v2(x, 0), 3);
    }

    // 获取预制体的属性
    getNavItem() {
        let node = cc.instantiate(this.nav_profab);
        return node;
    }

    // 添加导航栏
    addNavItem() {
        let width = this.getNavItem().width + 10;
        // 移除下面的所有节点
        this.nav_content.removeAllChildren();
        this.nav_content.width = this.sceneDatas.length * width
        for (let i = 0; i < this.sceneDatas.length; i++) {
            // 获取预制体
            let item = this.getNavItem();
            item.x = (i + 1 / 2) * width + 5;
            // 获取预制体脚本
            let swiperItemJS = item.getComponent('NavItem')
            // 初始化
            let title = this.sceneDatas[i].desc;
            let avatar = this.sceneDatas[i].thumb;
            // 初始化 
            swiperItemJS.init(avatar, title, i);
            // 节点挂载 content上
            this.nav_content.addChild(item);
        }
    }

    /**
     * @description 根据节点索引，移动到对应的节点
     * @param index 移动到的目标节点的索引
     */
    changeNav(index: number): void {
        let children = this.nav_content.children;
        let target = children[index];
        this.scrollTo(target);
    }

    /**
     * @description 获取组件点击传来的参数，并作用于scroll组件
     * @param e 组件触发的事件
     * @param index 事件所带的参数 1 表示向右移动 -1表示向左移动
     */
    changeNavEvent(e: cc.EventTarget, index: string): void {
        let current = Number(index);
        if (current > this.sceneDatas.length) return;
        this.navIndex += current;
        // 防止 到达最左边
        if (this.navIndex <= 0) {
            this.navIndex = 0;
        }
        this.changeNav(this.navIndex)
    }

    // 展示提示框
    showNotice() {
        this.notice.active = true;
        cc.tween(this.notice)
            .to(0.2, { scale: 1.2 })
            .to(0.1, { scale: 1 })
            .delay(2)
            .call(() => {
                this.notice.active = false;
            })
            .start()
    }

    // 更新解锁状态
    updateStatus() {
        let children = this.nav_content.children
        for (let i = 0; i < children.length; i++) {
            let NavItemJs = children[i].getComponent("NavItem")
            if (SceneContent.inst.totalIndex >= NavItemJs.id) {
                NavItemJs.unLock();
            }
            if (SceneContent.inst.currentIndex == NavItemJs.id) {
                NavItemJs.setActive()
            }
        }
    }


    start() {

    }

    // update (dt) {}
}
